import request from '../../../utils/request'
import PubSub from 'pubsub-js'
import moment from 'moment'
Page({
  // 1. 控制歌曲播放状态 
  handlerPlayOrPause() {
    // 获取原值 然后取反
    const isPlay = !this.data.isPlay
    // 更新回去
    this.setData({
      isPlay
    })

    // 使用当前按钮控制音乐的播放或暂停
    if (isPlay) {
      this.player.play()
    } else {
      this.player.pause()
    }
  },
  // 2. 获取歌曲详情信息
  async getSongInfoData() {
    const {
      songId: ids
    } = this.data
    const result = await request({
      url: '/song/detail',
      data: {
        ids
      }
    })
    if (result.code === 200) {
      console.log('res', result)
      this.setData({
        songInfo: {
          songName: result.songs[0].name,
          singer: result.songs[0].ar[0].name,
          songPicUrl: result.songs[0].al.picUrl,
          // dt: result.songs[0].dt // 歌曲的播放时长
          dt: moment(result.songs[0].dt).format('mm:ss')
        }
      })

      // 设置导航标题项为歌曲名字
      wx.setNavigationBarTitle({
        title: result.songs[0].name,
      })
    }
  },
  // 3. 获取歌曲的播放链接地址
  async getSongUrl() {
    const {
      songId: id
    } = this.data
    const result = await request({
      url: '/song/url',
      data: {
        id
      }
    })
    // console.log('url', result)
    if (result.code === 200) {
      this.setData({
        songUrl: result.data[0].url
      })
    }
  },
  // 4. 播放下一首或上一首
  handlerSwitch(e) {
    // 4.1 获取按钮的标识
    // console.log('ss', e)
    const type = e.target.id
    // 4.2 将标识传递给推荐歌曲列表
    // 发布消息 发布数据
    PubSub.publish('type', type)
  },
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 歌曲是否播放
    songId: '', // 当前播放歌曲的id
    songInfo: {}, // 歌曲详情信息
    songUrl: '', // 歌曲的播放链接
    currentTime: '', // 歌曲的当前播放时长 也是就当前的播放进度
    durationTime: '', // 歌曲的总时长
    progressWidth: '', // 进度条的进度
     // 当前音乐播放进度
    currentPosition: 0,
     // 音乐总时长
    duration: 0,
  },
  // 进度条改变时触发的函数
  sliderChange: function (e) {
    // 获取进度条的值
    const value = e.detail.value
    // 设置当前音乐播放进度
    this.setData({
      currentPosition: value,
    })
    // 调用音乐播放器的跳转函数，跳转到对应的播放位置
    audioContext.seek(value)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // console.log('oo', options)
    // 1. 获取传递过来的歌曲id
    const songId = options.songId
    // 2. 将歌曲id存储一下
    this.setData({
      songId,
      isPlay: true // 开始立即播放
    })

    // 3. 发送请求 获取歌曲详情
    await this.getSongInfoData()

    // 4. 获取歌曲播放链接 
    await this.getSongUrl()

    // 5. 让歌曲立即播放 先获取一个全局唯一的播放器对象
    // this.player = wx.getBackgroundAudioManager()
    // this.player.src = this.data.songUrl // 播放的链接
    // // 还需要设置一个title
    // this.player.title = this.data.songInfo.songName
    this.songPlay()

    // 6. 让系统按钮和我们自己的按钮保持 一致 
    this.player.onPlay(() => {
      this.setData({
        isPlay: true
      })
    })
    this.player.onPause(() => {
      this.setData({
        isPlay: false
      })
    })
    this.player.onEnded(() => {
      // 播放完成之后，自动播放下一首
      PubSub.publish('type', 'next')
    })

    // 8. 监听音乐播放的时间
    this.player.onTimeUpdate(() => {
      // console.log('aab', this.player.currentTime, this.player.duration)
      this.setData({
        // 1s = 1000ms  1min = 60s 1h=60min 1day = 24h
        currentTime: moment(this.player.currentTime * 1000).format('mm:ss'),
        durationTime: moment(this.player.duration * 1000).format('mm:ss'),
        progressWidth: this.player.currentTime * 450 / this.player.duration + 'rpx'
      })
    })

    // 7. 接收传递过来的新歌曲的songId
    PubSub.subscribe('songId', async (_, songId) => {
      // 7.1 更改一下当前页面的songId 
      this.setData({
        songId,
        isPlay: true
      })
      // 7.2 重新获取歌曲的详情信息和播放地址
      await this.getSongInfoData()
      await this.getSongUrl()

      // 7.3 重新播放
      this.songPlay()
    })
  },
  songPlay() {
    //  让歌曲立即播放 先获取一个全局唯一的播放器对象
    this.player = wx.getBackgroundAudioManager()
    if (!this.data.songUrl) {
      wx.showModal({
        title: '提示',
        content: '请充值会员',
        success(res) {
          if (res.confirm) {
            // 应该跳转到充值的页面
            PubSub.publish('type', 'next')
          } else if (res.cancel) {
            // console.log('用户点击取消')
            // 如果用户点了取消，则回到列表页
            wx.navigateTo({
              url: '/packageSong/pages/recommendSong/recommendSong',
            })
          }
        }
      })
      this.setData({
        isPlay: false // 不播放的状态
      })
      return // 阻止代码向下执行
    }
    this.player.src = this.data.songUrl // 播放的链接
    // 还需要设置一个title
    this.player.title = this.data.songInfo.songName

    //  // 创建音乐播放器上下文
    //  audioContext = wx.createInnerAudioContext()
    //  // 监听音乐播放器的播放进度事件
    //  audioContext.onTimeUpdate(() => {
    //    // 获取当前音乐的播放进度和总时长
    //    const currentPosition = Math.round(audioContext.currentTime)
    //    const duration = Math.round(audioContext.duration)
    //    // 更新页面数据
    //    this.setData({
    //      currentPosition,
    //      duration,
    //    })
    //  })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})